$(function () {
    var detailList
    if (detailList == null || detailList.length == 0) {
        detailList = []
    }

    function detailshow() {
        $('.site-header .goods-detail').click(function () {
            // console.log($(this));
            var goodObj = {
                id: $(this).find('.data-id').last().text(),
                imgurl: $(this).find('img')[0].src,
                name: $(this).find('.data-name').html(),
                describe: $(this).find('.data-describe').html(),
                price: parseInt($(this).find('.data-price').html()),
                num: 1
            };
            // console.log(goodObj.id, goodObj.imgurl, goodObj.name, goodObj.describe, goodObj.price);
            if (detailList.length === 0) {
                // 添加到detailList
                detailList.push(goodObj);
            } else {
                for (var i = 0; i < detailList.length; i++) {
                    // 如果商品已经存在cookie中，则数量+1
                    if (detailList[i].id === goodObj.id) {
                        detailList[i].num++;
                        localStorage.setItem('detaillist', JSON.stringify(detailList))
                        break
                    }
                } if (i === detailList.length) {
                    // 添加到detailList
                    detailList.push(goodObj);
                    localStorage.setItem('detaillist', JSON.stringify(detailList))
                }
            }
            localStorage.setItem('detaillist', JSON.stringify(detailList))
        })
    }
    function show(start) {
        $.ajax({
            type: 'get',
            url: 'http://localhost/mi/mi.json',
            success(result) {
                let str = '';
                for (let i = start; i < start + 6; i++) {
                    str += `<li>
                                <a class="goods-detail" href="http://localhost/mi/detail/">
                                    <div>
                                        <img src="${result[i].imgurl}" height="130" alt="">
                                    </div>
                                    <p class="data-name">${result[i].name}</p>
                                    <p class="data-price">${result[i].price}起</p>
                                    <span class="data-id" style="display:none">${result[i].id}</span>
                                    <span class="data-describe" style="display:none">${result[i].describe}</span>
                                </a>
                            </li>`
                }
                $('.header-nav-menu ul').html(str);
                detailshow()
            }
        })
    }
    let lis = $(".header-nav ul>div>li");
    lis.each((index, item) => {
        item.onmouseenter = () => {
            show(index * 6)
            $('.header-nav-menu').slideDown(500);
        }
    })
    $('.header-nav-menu').mouseleave(event => {
        $('.header-nav-menu').slideUp(500);

    })


    function show1(start) {
        $.ajax({
            type: 'get',
            url: 'http://localhost/mi/mi.json',
            success(result) {
                let str = '';
                for (let i = start; i < start + 18; i++) {
                    str += `<li>
                                 <a class="goods-detail" href="http://localhost/mi/detail/">
                                    <img src="${result[i].imgurl}" alt="" width="40" height="40">
                                    <span class="data-name">${result[i].name}</span>
                                    <p class="data-price" style="display:none">${result[i].price}</p>
                                    <p class="data-id" style="display:none">${result[i].id}</p>
                                    <p class="data-describe" style="display:none">${result[i].describe}</p>
                                </a>
                            </li>`
                }
                $('.children ul').html(str);
                detailshow()
            }
        })
    }
    let lis2 = $(".site-category>ul li");
    lis2.each((index, item) => {
        item.onmouseenter = () => {
            show1(index * 18)
            $('.children').fadeIn(100);
        }
    })
    $('.site-category').mouseleave(event => {
        $('.children').fadeOut(100);
    })



    let ul = $('.header-slide ul'),
        last = $('.header-slide span').eq(1),
        next = $('.header-slide span').eq(0),
        i = 0;

    var play = function () {
        i++;
        i = i > 3 ? 0 : i;
        $(ul.children()[i]).stop().fadeIn(1000).siblings().fadeOut(1000);
    }
    let timer = setInterval(play, 3000);
    next.click(() => {
        play()
    })
    last.click(() => {
        i--;
        i = i < 0 ? 3 : i;
        $(ul.children()[i]).stop().fadeIn(1000).siblings().fadeOut(1000);
    })
    ul.mouseenter(() => {
        clearInterval(timer);
        delete timer
    }).mouseleave(() => {
        timer = setInterval(play, 3000);
    })
    next.mouseenter(() => {
        clearInterval(timer);
        delete timer
    }).mouseleave(() => {
        timer = setInterval(play, 3000);
    })
    last.mouseenter(() => {
        clearInterval(timer);
        delete timer
    }).mouseleave(() => {
        timer = setInterval(play, 3000);
    })
    var userName = [];
    userName = JSON.parse(localStorage.getItem('username'))
    if (userName == null || userName.length == 0) {
        userName = []
    } else {
        $('#top .right').html(`
        <span class="uname">${userName[userName.length - 1].uname}，您好</span> <span>|</span>
        <a class="esclogin">退出</a> <span>|</span>
        <a href="#">消息通知</a> <span>|</span>
    `)
        $('.esclogin').click(() => {
            localStorage.removeItem('username')
            location.reload()
        })
    }
    if (localStorage.getItem('goodsnum')) {
        $('.goodsNum').html(localStorage.getItem('goodsnum'))
    } else {
        $('.goodsNum').html(0)
    }

})

